<template>
  <div>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="boxCodeList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="boxId" label="箱码" />
      <el-table-column prop="itemName" label="存货名称" />
      <el-table-column prop="spec" label="规格型号" />
      <el-table-column prop="uom" label="计量单位" />
      <el-table-column prop="batch" label="批次号" />
      <el-table-column prop="boxNum" label="箱码数量" />
      <el-table-column prop="productionDate" label="生产日期">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="binId" label="库位编号" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <div style="text-align: center; margin-top: 20px;">
      <el-button type="primary" @click="handleConfirm">确认选择</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { listBoxCodes,unshippedBoxCodesByPoId } from "@/api/purchase/boxCodes";
import {unshippedBoxCodes} from "../../api/purchase/boxCodes";

export default {
  name: "BoxCodeSelect",
  props: {
    poId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 箱码表格数据
      boxCodeList: [],
      // 选中的箱码
      selectedBoxCodes: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  watch: {
    poId: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.getList();
        }
      }
    }
  },
  methods: {
    // 查询箱码列表
    getList() {
      console.log(this.poId);
      unshippedBoxCodes(this.poId).then(response => {
        this.boxCodeList = response.rows;
        console.log(this.boxCodeList);
        this.total = response.total;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedBoxCodes = selection;
    },
    // 确认选择
    handleConfirm() {
      if (this.selectedBoxCodes.length === 0) {
        this.$modal.msgError("请至少选择一个箱码");
        return;
      }
      this.$emit('select', this.selectedBoxCodes);
    },
    // 取消
    handleCancel() {
      this.$emit('select', []);
    }
  }
};
</script>
